<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>模板语法</title>
	<!-- <script src="https://unpkg.com/vue@next"></script> -->
	<script src="js/vue.global.js"></script>
	<link rel="stylesheet" href="css/com.css">
</head>
<body>
<hr><h3>〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓  文本  〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓</h3>
<div id="app" class="demo">
	<p>这里会自增：{{counter}}</p>
	<p v-once>这里不会自增：{{counter}}</p>
</div>

</body>
<script>
const app = Vue.createApp({
	data() {
		return { counter: 4 }
	},
	mounted() {
		setInterval(() => {
			this.counter++
		}, 1000)
	}
})
const vm = app.mount('#app');
</script>

<hr><h3>〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓  原始 HTML  〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓</h3>
<div id="example1" class="demo">
	<p>Using mustaches: {{ rawHtml }}</p>
	<p>Using v-text directive: <span v-text="rawHtml"></span></p>
	<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
<script>
const RenderHtmlApp = {
	data() {
		return {
			rawHtml: '<span style="color: red">This should be red.</span>'
		}
	}
}
Vue.createApp(RenderHtmlApp).mount('#example1')
</script>

<hr><h3>〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓  使用 JavaScript 表达式  〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓</h3>
<div id="example2" class="demo">
	<p>{{ number + 1 }}</p>
	<p>{{ ok ? 'YES' : 'No'}}</p>
	<p>{{ message.split('').reverse().join('') }}</p>
	<div v-bind:id="'list-' + id">查看我的id属性</div>
</div>
<script>
const JavaScriptCode = {
	data() {
		return {
			number: 3,
			ok: 1,
			message: 'abcd',
			id: 28,
		}
	}
}
Vue.createApp(JavaScriptCode).mount('#example2')
</script>

<hr><h3>〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓  参数  〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓</h3>
<div id="example3" class="demo">
	<a v-bind:href="url"> 1{{name}} </a>
	<p v-bind:class="'blue'">2{{name}}</p>
	
	<!-- v-bind 的缩写：就用一个冒号就行了 -->
	<p :class="'blue'">2.1{{name}}</p>
	
	<p v-bind:class="css_blue">3{{name}}</p>
	<p v-bind:class="{blue: is_blue}">4{{name}}</p>
	
	<!-- 设置多个class -->
	<p v-bind:class="{blue: is_blue, red: is_red}">5{{name}}</p>
	
	<!-- 设置多个class，用数组的方式 -->
	<p v-bind:class="[css_blue, css_red]">6{{name}}</p>
	
	<!-- style 数组方式 -->
	<p v-bind:style="[style_color, style_size]">7{{text}}</p>
	
	<!-- style 对象方式 -->
	<p v-bind:style="{color:'red', fontSize:'14px'}">8{{text}}</p>
	
	<!-- style 对象方式 - 动态绑定 -->
	<p :style="style_all">9{{text}}</p>
</div>
<script>
const Param = {
	data() {
		return {
			url: 'http://www.baidu.com',
			name: '百度一下',
			text: '容易走的路都是下坡路',
			css_blue: 'blue',
			css_red: 'red',
			is_blue: true, //false
			is_red: true,
			style_color: {color: 'green'},
			style_size: {fontSize: '20px'},
			style_all: {
				color: 'red',
				fontSize: '20px'
			}
		}
	}
}
let vm3 = Vue.createApp(Param).mount('#example3')
</script>

<hr><h3>〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓  动态参数  〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓</h3>
<div id="example4" class="demo">
	<a v-bind:[attributeName]="url"> {{name}} </a>
</div>
<script>
const Param2 = {
	data() {
		return {
			url: 'http://www.baidu.com',
			name: '百度一下2【有问题】',
			attributeName: 'href',
		}
	}
}
Vue.createApp(Param2).mount('#example4')
</script>






</html>